<template>
    <div id="sourcePieChart" class="h-400px">

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { IRegion } from '@/api/sem/types'
import { IPie } from '@/api/geo/types'

const props = defineProps<{
    PieChartData: IRegion[]
}>()

watch(() => props.PieChartData, () => {
    const chartDom = document.getElementById("sourcePieChart");
    if (chartDom == null) {
        return;
    }
    let myChart = echarts.getInstanceByDom(chartDom);
    // 如果不存在，就进行初始化
    if (myChart == null) {
        myChart = echarts.init(chartDom);
    }

    let array = <IPie[]>[]
    let option

    props.PieChartData.forEach(item => {
        array.push({
            value: item.markercontent as any,
            name: item.name + ' - ' + item.markercontent + '%',
        })
    })

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '0',
            left: 'center',
            orient: 'horizontal'
        },
        series: [
            {
                name: '各平台占比',
                type: 'pie',
                radius: ['45%', '70%'],
                center: ['50%', '45%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: array
            }
        ]
    };

    option && myChart.setOption(option);

})
</script>

<style scoped></style>